<!-- 自定义指标结论页 -->
<template>
  <div class='indicatorResultPage'>
    <div class="btns">
      <div class="btnLeft">
        <el-button type="primary" @click="goback()">返回</el-button>
        <!-- <el-button type="primary">确定</el-button> -->
      </div>
      <div class="btnRight">
        <el-button type="success">导出</el-button>
      </div>
    </div>
    <el-tabs v-model="tabValue" type="card" @tab-click="tabChange">
      <el-tab-pane
        v-for="item in details"
        :key="item.name"
        :name="item.name"
        :label="item.title">
        <div class="echartsContainer">
          <div class="echartBox" v-for="(detailItem, index) in item.content" :key="index">
            <div class="echartTitle">{{detailItem.prop}}</div>
            <Chart :ref="`tab${item.name}expTypeChart${index}`" :id="`tab${item.name}expTypeChart${index}`" :style="{width: '720px', height: '300px'}" :option="detailItem.option"/>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Chart from "../../../../home/views/components/sygl/component/Chart";
import chartApi from "./chartApi";
import api from '../api/exper.detail.js'

export default {
  name: 'indicatorResult',
  components: {Chart},
  props: {},
  data() {
    return {
      id: this.$route.query.id,
      tabValue: '0',
      details: [],/* {
        name: '0',
        title: '实验1',
        content: [
          {
            optionValue: '2',
            prop: '指标1',
            titlesArr: ['阶段1', '阶段2', '阶段3', '阶段4', '阶段5'],
            valueArr: [12,30,50,20,60],
            option: {}
          },{
            optionValue: '3',
            prop: '指标2',
            titlesArr: ['阶段1','阶段2','阶段3','阶段4','阶段5'],
            valueArr: [12,30,50,20,60],
            option: {}
          },{
            optionValue: '1',
            prop: '指标3',
            data: [
              {value: 10, name: '阶段1'},
              {value: 20, name: '阶段2'},
              {value: 30, name: '阶段3'},
              {value: 38, name: '阶段4'},
              {value: 12, name: '阶段5'}
            ],
            option: {}
          }
        ]
        },{
          name: '1',
          title: '实验2',
          content: [
            {
              optionValue: '2',
              prop: '指标1',
              titlesArr: ['阶段1', '阶段2', '阶段3', '阶段4', '阶段5'],
              valueArr: [12,30,50,20,60],
              option: {}
            }
          ]
        },{
            name: '2',
            title: '实验3',
            content: [
              {
                optionValue: '2',
                prop: '指标1',
                titlesArr: ['阶段1', '阶段2', '阶段3', '阶段4', '阶段5'],
                valueArr: [12,30,50,20,60],
                option: {}
              }
            ]
          }
        ]} */
      /* 
      // 二维数据
      {
        type: 'line',
        title: '指标4',
        legendData: ['实验1', '实验2', '实验3','实验4'],
        xData: ['阶段1','阶段2','阶段3','阶段4','阶段5'],
        seriesData: [{
          type: 'line',
          name: '实验1',
          data: [23,4,63,65,25]
        },{
          type: 'line',
          name: '实验2',
          data: [13,40,45,6,24]
        },{
          type: 'line',
          name: '实验3',
          data: [56,4,22,45,56]
        },{
          type: 'line',
          name: '实验4',
          data: [13,4,45,45,20]
        }],
        option: {}
      },{
        type: 'bar',
        title: '指标1',
        data: [
          ['product', '实验1', '实验2', '实验3'],
          ['阶段1', '12', '20', '8'],
          ['阶段2', '23', '12', '34'],
          ['阶段3', '34', '23', '36'],
          ['阶段4', '3', '13', '36']
        ],
        option: {}
      } 
      ]*/
    }
  },
  watch: {},
  computed: {},
  methods: {
    goback() {
      this.$router.go(-1)
    },
    initChart(tabIndex = 0) {
      this.details[tabIndex].content.map(contentItem =>{
          if (contentItem.optionValue === '2') {
          contentItem.option = chartApi.getBarChart(contentItem.titlesArr, contentItem.valueArr)
        } else if (contentItem.optionValue === '3') {
          contentItem.option = chartApi.getLineChart(contentItem.titlesArr, contentItem.valueArr)
        } else if (contentItem.optionValue === '1') {
          contentItem.option = chartApi.getPieChart(contentItem.data)
        }
        return contentItem
      })
    },
    tabChange() {
      let tabIndex = Number(this.tabValue)
        this.initChart(tabIndex)
    },
    async getData() {
      let {data}  = await api.getConclusion(this.id)
      this.details = data.length ? data : this.details
      this.details.map(detailItem =>{
        detailItem.content.map(item =>{
          if (typeof item.valueArr === 'string') {
            item.valueArr = item.valueArr.split(',')
          }
          if (typeof item.titlesArr === 'string') {
            item.titlesArr = item.titlesArr.split(',')
          }
          // 如果选择饼状图，要修改echarts渲染的data格式
          if (item.optionValue === '1') {
            let data = []
            let obj = {}
            for (let i = 0; i < item.valueArr.length; i++) {
              obj['value'] = item.valueArr[i]
              obj['name'] = item.titlesArr[i]
              data.push(obj)
              obj = {}
            }
            item.data = data
          }
        })
        return detailItem
      })
      this.initChart()
    }
  },
  mounted() {
    this.getData()
  },
  created() {}
}
</script>

<style scoped lang="less">
.indicatorResultPage{
  .btns{
    display: flex;
    justify-content: space-between;
    padding: 20px 30px;
  }
}
.echartsContainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30px;
  .echartTitle{
    font-weight: bold;
    font-size: 20px;
  }
}
  </style>
